<template>
    <div id="max">
        <div id="opinion">
            <span id="return" @click="re">返回</span>
            <h3><span id="aa">意见反馈</span></h3>
        </div>
        <div id="tow">反馈类型(必填)</div>
        <!-- <div>请选择反馈类型</div> -->
        <el-button  @click="table = true" show-close="boolean">请选择反馈类型 <span id="arrow"> > </span></el-button>
        <div id="concrete">具体描述(必填)</div>
        <el-drawer v-model="table" title="反馈类型" direction="btt " size="50%">
            <el-table :data="gridData">
                <el-table-column property="date" label="" width="100%" />
                <el-table-column property="address" label="" />
            </el-table>
        </el-drawer>
        <div>
            <el-input v-model="textarea" :rows="4" type="textarea" placeholder="请具体准确描述您的问题，我们会尽快处理您的举报信息。（字数100字以内）" />
        </div>
        <div id="mm">
            <!-- <el-row class="mb-4">
                  <el-button type="success" id="xx" size="100%" click="submit1" >提交</el-button>
                </el-row> -->
            <el-button id="xx" text @click="open">提交</el-button>
        </div>
</div>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { ElDrawer, ElMessageBox } from "element-plus";
import router from "@/router";
const textarea = ref("");

const open = () => {
    ElMessageBox.alert("感谢您的反馈，我们会尽快处理", "反馈成功", {
        confirmButtonText: "OK",
        callback: (action: Action) => {
            ElMessage({
                type: "info",
                message: `action: ${action}`,
            });
        },
    });
};
const formLabelWidth = "80px";
let timer;
const table = ref(false);
const dialog = ref(false);
const loading = ref(false);
const form = reactive({
    name: "",
    region: "",
    date1: "",
    date2: "",
    delivery: false,
    type: [],
    resource: "",
    desc: "",
});
const gridData = [
    {
        date: "登陆注册",
    },
    {
        date: "工资提现",
    },
    {
        date: "活动相关",
    },
    {
        date: "产品建议",
    },
    {
        date: "其他",
    },
];
const drawerRef = ref<InstanceType<typeof ElDrawer>>();
const onClick = () => {
    drawerRef.value!.close();
};

const handleClose = (done) => {
    if (loading.value) {
        return;
    }
    ElMessageBox.confirm("Do you want to submit?")
        .then(() => {
            loading.value = true;
            timer = setTimeout(() => {
                done();
                // 动画关闭需要一定的时间
                setTimeout(() => {
                    loading.value = false;
                }, 400);
            }, 2000);
        })
        .catch(() => {
            // catch error
        });
};
let re = () => {
    router.push("/user");
};

const cancelForm = () => {
    loading.value = false;
    dialog.value = false;
    clearTimeout(timer);
};
let submit1 = () => {
    console.log("ddds");
    alert("提交成功");
};
</script>
<style lang="scss">
#max {
    width: 100%;
    height: 660px;

    #opinion {
        width: 100%;
        height: 30px;
        text-align: center;
    }

    #return {
        position: relative;
        left: -140px;
        top: 3px;
    }

    #xx {
        width: 250px;
        height: 50px;
        background-color: #ffcc00;
        position: relative;
        top: 30px;
        left: 50px;
    }

    #aa {
        position: relative;
        top: -23px;
    }

    #inp {
        width: 100%;
        height: 100px;
    }

    #tow {
        background-color: #f7f7f7;
        height: 40px;
        text-indent: 20px;
        line-height: 35px;
    }

    #arrow {
        position: relative;
        left: 200%;
    }

    #concrete {
        height: 40px;
        background-color: #f7f7f7;
        text-indent: 20px;
        line-height: 35px;
    }

    #mm {
        background-color: #f7f7f7;
        height: 430px;
    }
}
</style>
  